<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<style>
  .layui-table-cell {
    overflow: visible;
  }
  
  .layui-table-box {
    overflow: visible;
  }
  
  .layui-table-body {
    overflow: visible;
  }
  
  /* 设置下拉框的高度与表格单元相同 */
  td .layui-form-select {
    margin-top: -10px;
    margin-left: -15px;
    margin-right: -15px;
  }
  
  .fieldTable {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .layui-table-cell{
    display:table-cell;
    vertical-align: middle;
  }
</style>
<div class="layui-row">
  <div class="layui-col-md12 fieldTable">
    <fieldset class="layui-elem-field layui-field-title">
      <legend>默认配置</legend>
    </fieldset>
    <table
      class="layui-hide"
      id="fieldTable"
      lay-filter="fieldTableFilter"></table>
  </div>
</div>
<script src="/util/utils.js"></script>

<script
  type="text/html"
  id="customTableToolbar">
  <div class="layui-btn-group ">
    <button
      type="button"
      class="layui-btn layui-btn-xs"
      lay-event="addCustom">
      添加字段
    </button>
    <button
      type="button"
      class="layui-btn layui-btn-xs layui-btn-normal"
      lay-event="saveCustom">
      保存
    </button>
  </div>
</script>

<script
  type="text/html"
  id="templateFieldBar">
  <a
    class="layui-btn layui-btn-danger layui-btn-xs"
    lay-event="del">删除</a>
</script>


<script th:inline="javascript">
  var templateId = [[${templateId}]]
  layui.use(['form', 'table'], function () {
    var $ = layui.$,
      table = layui.table;

    var tableFieldInit = table.render({
      id: 'fieldTable',
      elem: '#fieldTable',
      url: '/code/field/page',
      page: {
        limit: 15,
        limits: [15, 30, 45]
      },
      parseData: function (res) { //res 即为原始返回的数据
        return {
          'code': res.code, //解析接口状态
          'msg': res.msg, //解析提示文本
          'count': res.data.total, //解析数据长度
          'data': res.data.records //解析数据列表
        }
      },
      where: {
        templateId: templateId
      },
      defaultToolbar: [''],
      cols: [
        [
          {
            field: 'fieldType',
            title: '类型名称',
            width: '30%'
          },
          {
            field: 'javaType',
            edit: true,
            title: '默认值'
          }
        ]
      ],
    })

    table.on('edit(fieldTableFilter)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
      console.log(obj.value); //得到修改后的值
      console.log(obj.field); //当前编辑的字段名
      console.log(obj.data); //所在行的所有相关数据
      var post = {}
      post[obj.field] = obj.value
      post.id =obj.data.id

      $.ajaxSetup({
        traditional: true,
        contentType: 'application/json;charset=utf-8'
      })
      
      $.post('/code/field/update', JSON.stringify(post), function (response) {
        layer.msg(response.data, {
          time: 1000,
          icon: 1
        })
      }, 'json')
    });

  })


</script>
</html>
